<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :node-data="companyInfo" />
        <hr>
        <el-tree
          :data="depts"
          :props="{label:'name'}"
          :default-expand-all="true"
        >
          <!-- 树形插槽中可以写节点模板, 这里写一次节点的布局
          这个组件会自动遍历所有数据, 每个节点渲染出来 -->
          <template v-slot="obj">
            <!-- 局部组件步骤三, 渲染, 替代原来的代码 -->
            <TreeTools
              :node-data="obj.data"
              @addDept="addDept"
              @editDept="editDept"
              @reloadPage="loadPage"
            />
          </template>
        </el-tree>
      </el-card>

    </div>
    <AddDept
      ref="addDept"
      :is-show-dialog="isShowDialog"
      :node-data="nodeData"
      @reloadPage="loadPage"
      @closeDialog="isShowDialog=false"
    />
  </div>
</template>

<script>
// 局部组件步骤一, 引入
import TreeTools from '../departments/components/tree-tools.vue'
import AddDept from './components/add--dept.vue'
import { getDeptList } from '@/api/departments'
import { listToTreeData } from '@/utils/index'

export default {
  components: {
    // 局部组件步骤二, 注册
    TreeTools,
    AddDept
  },
  data() {
    return {
      // depts: [
      //   { name: '总裁办', manager: '老王' },
      //   { name: '市场部', manager: '大王' },
      //   { name: '技术部', children: [
      //     { name: '前端开发', manager: '小王' },
      //     { name: '后端开发' }
      //   ] },
      //   { name: '人事部' }
      // ],
      depts: [],
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      isShowDialog: false,
      nodeData: {}
    }
  },
  async created() {
    // const res = await getDeptList()
    // // console.log(res)
    // // this.depts = res.depts
    // // this.depts = this.listToTreeData(res.depts, '')
    // this.depts = listToTreeData(res.depts, '')
    this.loadPage()
  },
  methods: {
    async loadPage() {
      const res = await getDeptList()
      this.depts = listToTreeData(res.depts, '')
    },
    // addDept() {
    // 新增
    addDept(nodeData) {
      // console.log(nodeData.id, 70)
      this.nodeData = nodeData
      this.isShowDialog = true
    },
    // 编辑
    editDept(nodeData) {
      // 这里是控制弹窗显示的地方, 希望可以同时调用探记录内部的回显数据方法
      // 只需要用 ref 的方式取得子组件, 就能够直接调用子组件的函数
      this.$refs.addDept.getDeptDetail(nodeData.id)
      this.nodeData = nodeData
      this.isShowDialog = true
    }
    // 这个函数应该封装到工具库
    // 树形数据转换第一步, 可以根据pid进行同级查找的函数, 先将顶级部门查找出来 pid === ""
    // listToTreeData(list, pid) {
    //   const arr = []
    //   list.forEach(el => {
    //     if (el.pid === pid) {
    // 每次得到一个结果, 就是同级部门, 于是推入 arr 结果当中
    // 其实每个顶级部门都可能有子部门的, 我们需要找到子部门
    // 放入这个 el.children 当中, 子部门的特性是 pid === el.id
    //       el.children = this.listToTreeData(list, el.id)
    //       arr.push(el)
    //     }
    //   })
    //   return arr
    // }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}

</style>
